import {View, Button, Text, Image, ScrollView, Radio} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './memberPay.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import api from 'api';

type ITopProps = T.IProps & T.ITopProps;
//@ts-ignore
@connect<Partial<ITopProps>, T.ITopState>(store2Props, actions)
export default class Info extends Component<Partial<ITopProps>, T.ITopState & {checkProtocol: boolean}> {
  constructor(props: ITopProps) {
    super(props);
    this.state = {
      checkProtocol: false,
    };
  }

  render() {
    let {
      actions: {action},
    } = this.props;
    return (
      <View className="memberOpen-pay">
        <View
          style={{flexDirection: 'row', width: '85vw', margin: '0 auto'}}
          onClick={() => {
            this.setState({
              checkProtocol: !this.state.checkProtocol,
            });
          }}
        >
          <Radio checked={this.state.checkProtocol} color="#2793FA" style={{transform: 'scale(0.65)'}}></Radio>
          <View className="protocolBoxText">
            开通会员前请务必仔细阅读
            <Text
              className="protocolText"
              onClick={(e) => {
                e.stopPropagation();
                Taro.navigateTo({
                  url: '/pages/package-A/protocol/renewMember/index',
                });
              }}
            >
              《会员服务协议》
            </Text>
            规则
          </View>
        </View>
        <View
          onClick={() => {
            if (!this.state.checkProtocol) return;
            // 小程序内的支付
            Taro.login({
              async success(res: {code: any | PromiseLike<string>; errMsg: string}) {
                if (res.code) {
                  let openid;
                  try {
                    openid = await api.payController.getLittleProgramOpenId(res.code);
                  } catch (e) {
                    Taro.showToast({
                      title: '功能不可用',
                      icon: 'none',
                      duration: 2000,
                    });
                    return;
                  }
                  await action.goToWeixinPay(openid);
                } else {
                  console.log('PayList_获取code失败！' + res.errMsg);
                }
              },
            });
          }}
          className={`payBtn ${this.state.checkProtocol ? 'payBtn-click' : ''}`}
        >
          确认协议并立即开通
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
